<template>
<page>
  <div class="wrapper">
    <head title="Delivery tracking"></head>
    <div class="detailItem">
      <div class="itemLeft">
        <text class="detaTit">Delivery company</text>
        <text class="detaInf">{{ShipperCode}}</text>
      </div>
    </div>
    <!-- 物流信息 -->
    <scroller class="wuliuMes">
      <div class="secTop">
        <text class="paidtip">Tracking number</text>
        <text class="paidnum">{{LogisticCode}}</text>
      </div>
      <div class="devList" v-if="traces.length>0">
        <div class="itemList" v-for="(item,index) in traces" :key="index">
          <div class="lineBox">
            <text class="itemTit">{{item.AcceptStation}}</text>
            <text class="itemDec">{{item.AcceptTime}}</text>
          </div>
          <text class="radio" :class="[index==0?'activeR':'']"></text>
        </div>
      </div>
    </scroller>
    <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
      <floading class="indicator" color="#333333"></floading>
    </div>
  </div>
</page>
</template>

<script>
import {
  get_order_coInfo,
  get_order_express,
  get_order_co_info
} from "../../../mixin/ajax.js";
import asCore from "../../../mixin/core";

export default {
  data() {
    return {
      ShipperCode: "",
      LogisticCode: "",
      OrderCode: "",
      type: "",
      traces: []
    };
  },
  methods: {
    onLoad(param) {
      asCore.getBsessionid(userId => {
        this.userId = userId;
        if (param && param.shipper_code) {
          this.ShipperCode = param.shipper_code;
          this.LogisticCode = param.logistic_code;
          this.getExpress();
        }
        if (param.type) {
          this.orderType = param.type;
        }
        if (param.id) {
          this.orderId = param.id;
          this.getOrderInfo();
        }
      });
    },
    getOrderInfo() {
      if (this.orderType == "sold") {
        get_order_coInfo(
          { users_id: this.userId, co_order_id: this.orderId },
          (res, flag) => {
            if (flag) {
              if (res.code == 200) {
                this.ShipperCode = res.data.shipper_code;
                this.LogisticCode = res.data.logistic_code;
                this.getExpress();
              }
            }
          }
        );
      } else {
        get_order_co_info(
          { users_id: this.userId, co_order_id: this.orderId },
          (res, flag) => {
            if (flag) {
              if (res.code == 200) {
                this.ShipperCode = res.data.shipper_code;
                this.LogisticCode = res.data.logistic_code;
                this.getExpress();
              }
            }
          }
        );
      }
    },
    getExpress() {
      get_order_express(
        { shipper_code: this.ShipperCode, logistic_code: this.LogisticCode },
        (res, flag) => {
         
          if (flag) {
            this.OrderCode = res.OrderCode; //物流运单号
            this.traces = res.Traces;
          }
        }
      );
    }
  }
};
</script>

<style scoped>
.wrapper {
  background-color: #f5f5f5;
  flex: 1;
}

.detailItem {
  padding: 32px;
  background-color: #ffffff;
}

.mt20 {
  margin-top: 20px;
}

.itemLeft {
  flex-direction: row;
  align-items: center;
}

.detaTit {
  color: #999999;
  font-size: 28px;
  width: 260px;
}

.detaInf {
  color: #333333;
  font-size: 28px;
  line-height: 40px;
}

.active {
  color: #ba8833;
}

.wuliuMes {
  padding: 20px;

  margin-top: 20px;
  flex: 1;
  background-color: #ffffff;
}

.secTop {
  flex-direction: row;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-top: 20px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #d8d8d8;
  margin-bottom: 30px;
}

.paidtip {
  font-size: 28px;
  color: #999999;
  line-height: 40px;
  margin-right: 40px;
}

.paidnum {
  font-size: 32px;
  color: #333333;
}

.devList {
  padding: 20px;
  position: relative;
}

.Expand {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.ExpandTxt {
  color: #888888;
  font-size: 16px;
  margin-right: 15px;
}

.ExpandIcon {
  font-family: iconfont;
  color: #888888;
  font-size: 30px;
}

.itemList {
  padding-left: 12px;
  margin-left: 12px;
  /* border-left-width: 1px;
	 		border-left-style: solid;
	 		border-left-color: #D8D8D8; */
  position: relative;
}

.lineBox {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #d8d8d8;
  padding-left: 24px;
  padding-bottom: 24px;
}

.radio {
  position: absolute;
  left: 0px;
  top: 0;
  background-color: #d8d8d8;
  width: 24px;
  height: 24px;
  border-radius: 12px;
}

.activeR {
  background-color: #f3d39e;
  border-color: #ba8833;
  border-width: 4px;
  border-style: solid;
}

.itemTit {
  color: #666;
  font-size: 22px;
}

.itemDec {
  color: #999999;
  font-size: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #d8d8d8;
}
</style>
